<template>
  <div>
    <n-button @click="selectGoods" :type="btnType">选择商品</n-button>
    <n-modal
      v-model:show="showSelectGoodsModal"
      class="selectGoodsModal"
      title="选择商品"
      preset="card"
      style="width: 1000px"
      :bordered="false"
      size="huge"
    >
      <n-space class="goods-search-box">
        <n-input
          class="goods-name-input"
          v-model:value="goodsNameSearch"
          placeholder="请输入商品名称"
        />
        <n-button type="primary" @click="searchGoods">搜索</n-button>
        <n-p> 你选中了 {{ checkedRowKeys.length }} 个商品。 </n-p>
      </n-space>

      <n-data-table
        :columns="goodsColumns"
        :data="goodsDataTable"
        :row-key="rowKey"
        :pagination="pagination"
        @update:checked-row-keys="handleCheck"
        v-model:checkedRowKeys="checkedRowKeys"
      />
      <template #action>
        <n-space justify="end">
          <n-button @click="() => (showSelectGoodsModal = false)">取消</n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmGoods">确定</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
  import { onBeforeUnmount, h, reactive, ref, shallowRef, computed } from 'vue';
  import { useDialog, useMessage, DataTableRowKey } from 'naive-ui';
  import { goodsColumns } from './goodsColumns';
  import { getAllGoods } from '@/api/goods/goods';
  interface Props {
    selected: number[]; // 已选择id数组
    btnType: string; // 已选择id数组
    pageSize: number;
  }
  interface EmitEvent {
    (e: 'update:complete', params: object[]): void;
  }
  const props = withDefaults(defineProps<Props>(), {
    pageSize: 5,
    btnType: 'primary',
  });
  const emit = defineEmits<EmitEvent>();

  const formBtnLoading = ref(false);
  const goodsNameSearch = ref(''); // 商品选择时 名称搜索
  const goodsDataTable = ref([]);
  const showSelectGoodsModal = ref(false); // 选择商品
  // 商品选择器的key和行
  const checkedRowKeys = ref<DataTableRowKey[]>([]);
  const checkedRow = ref<object[]>([]);

  // 商品选择器的行数据
  type RowData = {
    id: number;
    classifyName: string;
    brandName: string;
    goodsName: string;
    goodsSn: string;
    goodsPrice: number;
  };
  // 指定商品选择器的 key
  const rowKey = (row: RowData) => row.id;
  const pagination = { pageSize: props.pageSize };
  const btnType = ref(props.btnType);

  function selectGoods() {
    // 清空已选择数据
    checkedRow.value = [];
    checkedRowKeys.value = [];
    getAllGoods().then((res) => {
      showSelectGoodsModal.value = true;
      // 这里未做分页
      goodsDataTable.value = res;
      checkedRowKeys.value = props.selected;
    });
  }
  /**
   * 搜索商品
   */
  function searchGoods() {
    getAllGoods({ goodsName: goodsNameSearch.value }).then((res) => {
      // 这里未做分页
      goodsDataTable.value = res;
    });
  }

  function handleCheck(rowKeys: DataTableRowKey[], rows: object[]) {
    checkedRowKeys.value = rowKeys;
    checkedRow.value = rows;
  }

  function confirmGoods(e) {
    formBtnLoading.value = true;
    e.preventDefault();
    // 只返回新增的商品
    let addCheckRows: object[] = [];
    checkedRow.value.forEach((item) => {
      if (!props.selected.includes(item['id'])) {
        addCheckRows.push(item);
      }
    });
    emit('update:complete', addCheckRows);
    showSelectGoodsModal.value = false;
    formBtnLoading.value = false;
  }
</script>
<style lang="less"></style>
